<template>
  <div class="login">
    <div class="login-box">
      <el-form :model="loginForm" ref="loginForm" status-icon :rules="rules" label-width="90px">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="loginForm.username" autocomplete="off" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input type="text" v-model="loginForm.captcha" autocomplete="off" style="width: 50%;float: left"></el-input>
          <div class="div-captcha">
            <img :src="captchaPath" ref="code" @click="getCaptcha">
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 80%" @click="submitForm('loginForm')">登&nbsp;&nbsp;录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  import { getParam } from '@/utils/parameter'

  export default {
    data() {
      const checkPassword = (rule, value, callback) => {
        const reg_password = /^(?=.*[A-Za-z0-9])[^]{6,16}$/;
        if (!reg_password.test(value)) {
          callback(new Error('密码长度为6~16位的数字或英文字母!'));
        }
        callback();
      };
      return {
        //登录表单数据
        loginForm: {
          username: '',
          password: '',
          captcha: '',
        },
        // 验证码图片路径
        captchaPath: '../../static/images/G6BB.png',
        rules: {
          username: [
            {required: true, message: '请输入账号!', trigger: 'blur'},
            {min: 5, max: 12, message: '账号长度为5~12个字符!', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码!', trigger: 'blur'},
            {validator: checkPassword, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          const data = {
            username: this.loginForm.username,
            password: this.loginForm.password,
            captcha: this.loginForm.captcha
          }
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/login/auth'),
              method: 'post',
              data: this.$http.adornData(data)
            }).then(response => {
              const result = response.data
              if (result.code === 200) {
                this.$message({message: result.msg, type: 'success'})
                this.$store.dispatch('user/set_LoginInfo', result.data)
                this.$router.replace({ name: 'home' })
              }else {
                this.getCaptcha()
                this.$message({message: result.msg, type: 'error'})
              }
            }).catch(reason => {})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getCaptcha () {
        const userMockJS = getParam('userMockJS')
        if (userMockJS) {
          return
        }
        this.captchaPath = this.$http.adornUrl('/captcha.jpg?r=' + Math.random())
      },
      created () {
        this.getCaptcha()
      }
    }
  }
</script>

<style>
  html, body, #app, .login {
    height: 100%;
    min-width: 1024px;
  }

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../../assets/images/login-bg.jpg);
    background-size: cover;
  }

  .login-box {
    width: 340px;
    border-radius: 5px;
    min-height: 180px;
    margin-left: 40%;
    padding: 50px 30px 0px 0px;
    background: #ffffff;
    opacity: 0.85;
  }

  .div-captcha {
    float: left;
    width: 50%;
    height: 40px;
  }

  .div-captcha img {
    width: 100%;
    height: 100%;
    margin-left: 10px;
    cursor: pointer;
  }

  /*color: #42b983;*/
</style>
